<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="security"
	uri="http://www.springframework.org/security/tags"%>
<div id="page-wrapper">
	<div class="row">
	  	<div class="col-lg-12">
					<div class="page-header">
                   <h3>用户管理</h3>
				   <p>用户管理页面</p>
				   </div>
                </div>
			<div class="col-lg-12">
			<div class="panel panel-default">
				<div class="panel-heading">
				 <button class="btn btn-primary " data-toggle="modal" data-target="#userAddModal">添加用户</button>
				<button class="btn btn-primary " data-toggle="modal" data-target="#confirmModal">删除用户</button>
				</div>
				<!-- /.panel-heading -->
				<div class="panel-body">
					<div class="table-responsive">
						<table class="table table-striped table-bordered table-hover"
							id="dataTables-example">
							<thead>
								<tr>
									<th>选中</th>
									<th>用户编号</th>
									<th>用户账户</th>
									<th>登录名称</th>
									<th>用户状态</th>
									<th>操作</th>

								</tr>

								<tr>
									<td><input type="hidden" /></td>
									<td><input type="text" name="search_user_id"
										value=" 查询 用户编号" class="search_init" /></td>
									<td><input type="text" name="search_user_account"
										value="查询 用户账户" class="search_init" /></td>
									<td><input type="text" name="search_user_name"
										value="查询 登录名称" class="search_init" /></td>
									<td><select name="search_user_enabled" class="search_init">
											<option value="1">启用</option>
											<option value="0">禁用</option>
									</select></td>
									<td><input type="hidden" /></td>

								</tr>

							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
				<!-- /.panel-body -->
			</div>
			<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<div class="row">
		<div class="col-lg-6">
			<div class="panel  panel-info">
				<div class="panel-heading">用户详情</div>
				<form role="form">
					<input type="hidden"" id="userId"/>
					<div class="form-group">
                   <label>用户名</label>
                   <input class="form-control" id="userName">
                    <p class="help-block">当前用户的用户名</p>
                   </div>
                 <div class="form-group">
                    <label>用户账户</label>
                   <input class="form-control" id="userAccount">
                    <p class="help-block">当前用户的用户账户</p>
                    </div>
                     <div class="form-group">
                    <label>用户状态</label>
                    <select  id="userEnabled"    class="form-control" >
						<option value="1">启用</option>
						<option value="0">禁用</option>
					</select>
					<p class="help-block">当前用户的用户状态</p>
                 </div>
                 <div class="form-group">
                    <label>用户描述</label>
                    <textarea class="form-control" id="userDesc" rows="3"></textarea>
					<p class="help-block">当前用户的用户描述</p>
                 </div>
                 <div class="panel-footer">
					<button type="submit" class="btn btn-default">更新</button>
					<button type="reset" class="btn btn-default">重置</button>
				</div>
				</form>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="panel  panel-success">
				<div class="panel-heading">角色列表</div>
						<table width="96%" border="0" cellspacing="0" id="userRolesTable"
							cellpadding="3" align="center">
							<tr>
								<td align="left" width="200"
									style="padding: 2px 5px 2px 8px; line-height: 20px;"><strong>可选角色
								</strong><br /> <select name="userRolesOutGroup" id="userRolesOutGroup"
									size="15" style="width: 200px; height: 250px" multiple
									class="form-control"
									ondblclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)">

								</select></td>
								<td align="left" width="50"><input type="button"
									class="btn btn-primary" id="userRoleAddButton" value=" 添加 &#8250; " /><br />
								<br /> <input type="button" class="btn btn-primary"
									id="userRoleRemoveButton" value=" &#8249; 删除 " /><br />
								<br /> <input type="button" class="btn btn-primary"
									id="userRoleAddAllButton" value="全添加 &#187;" /><br />
								<br /> <input type="button" class="btn btn-primary"
									id="userRoleRemoveAllButton" value="&#171; 全删除" /><br /></td>
								<td align="left"
									style="padding: 2px 10px 2px 20px; line-height: 20px;"><strong>已选角色</strong><br />
									<select name="userRolesInGroup" id="userRolesInGroup" size="15"
									style="width: 200px; height: 250px" multiple class="form-control">
								</select></td>
							</tr>
						</table>
					
					<div class="panel-footer" align="left">
						<button type="button" class="btn btn-primary">取消</button>
						<button type="button" class="btn btn-primary">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<!-- 新增用户窗口 -->
<!-- Modal -->
<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">用户信息填写</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
                   <label>用户名</label>
                   <input class="form-control" id="userName">
                    <p class="help-block">当前用户的用户名</p>
                   </div>
                 <div class="form-group">
                    <label>用户账户</label>
                   <input class="form-control" id="userAccount">
                    <p class="help-block">当前用户的用户账户</p>
                    </div>
                     <div class="form-group">
                    <label>用户状态</label>
                    <select  id="userEnabled"    class="form-control" >
						<option value="1">启用</option>
						<option value="0">禁用</option>
					</select>
					<p class="help-block">当前用户的用户状态</p>
                 </div>
                 <div class="form-group">
                    <label>用户描述</label>
                    <textarea class="form-control" id="userDesc" rows="3"></textarea>
					<p class="help-block">当前用户的用户描述</p>
                 </div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- 确认窗口 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">确认操作</h4>
			</div>
			<div class="modal-body">确定要删除选中记录吗？</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary">确定</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>